<template>
    <uni-transition
        mode-class="zoom-in"
        needLayout="true"
        :show="orderData.orderStatus?.length"
        :duration="500"
    >
        <view class="order_detail">
            <!-- Main Start -->
            <view class="flex pb-[30rpx] text-white">
                <image
                    v-if="orderData.orderStatus === 0"
                    class="header-image"
                    src="/static/images/icon_pay.png"
                ></image>
                <image
                    v-if="orderData.orderStatus === 1 || orderData.orderStatus === 2"
                    class="header-image"
                    src="/static/images/icon_wait.png"
                ></image>
                <image
                    v-if="orderData.orderStatus === 3"
                    class="header-image"
                    src="/static/images/icon_success.png"
                ></image>
                <text class="ml-[15rpx]">{{
                    orderData.orderStatus == 1
                        ? '待付款'
                        : orderData.orderStatus == 2
                        ? '已完成'
                        : '已关闭'
                }}</text>
            </view>

            <!-- 商品卡片 -->
            <view class="card" @click="goCourseDetail(orderData?.courseSnap.id)">
                <view class="course-item">
                    <u-image
                        :src="orderData?.courseCover"
                        width="260"
                        height="160"
                        border-radius="10"
                    ></u-image>
                    <view class="course-item--text ml-[20rpx] mt-[4rpx]">
                        <view class="flex justify-between title">
                            <view class="line-2">{{ orderData?.courseSnap?.name }}</view>
                        </view>
                        <view class="mt-[16rpx]">
                            <price
                                :content="orderData?.courseSnap?.sellPrice"
                                mainSize="36rpx"
                                minorSize="34rpx"
                                fontWeight="500"
                            ></price>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 服务金额 -->
            <view class="card text-md">
                <view class="flex justify-between">
                    <view>优惠券</view>
                    <view class="primary font-medium">-¥{{ orderData?.couponDiscountPrice }}</view>
                </view>
                <view class="flex justify-between mt-[30rpx]">
                    <view>积分抵扣</view>
                    <view class="primary font-medium"
                        >-¥{{ Number(orderData?.integralDiscountPrice).toFixed(2) }}</view
                    >
                </view>
                <view class="flex justify-between mt-[30rpx]">
                    <view>实付金额</view>
                    <view class="primary font-medium"
                        >¥{{ Number(orderData?.orderAmount).toFixed(2) }}</view
                    >
                </view>
            </view>

            <!-- 订单信息 -->
            <view class="card text-md">
                <view class="flex justify-between">
                    <view>订单编号</view>
                    <view>{{ orderData.sn }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between">
                    <view>支付方式</view>
                    <view>{{
                        orderData.payWay == 1
                            ? '余额支付'
                            : orderData.payWay == 2
                            ? '微信支付'
                            : '-'
                    }}</view>
                </view>
                <view class="mt-[30rpx] flex justify-between">
                    <view>下单时间</view>
                    <view>{{ orderData.createTime }}</view>
                </view>
                <view v-if="orderData.refundStatus == 3" class="mt-[30rpx] flex justify-between">
                    <view>退款状态</view>
                    <view>已退款</view>
                </view>
            </view>
            <!-- Main End -->
        </view>
    </uni-transition>
    <!-- Footer Start -->
    <view class="footer flex justify-end">
        <view class="footer--wrap">
            <order-footer
                :order="orderData"
                :orderId="orderId"
                :cancel="orderData.orderStatus == 1"
                :evaluate="orderData.showComment == true"
                :pay="orderData.orderStatus == 1"
                :del="orderData.orderStatus == 3"
                @refresh="initOrderDetail"
            />
        </view>
    </view>
    <!-- Footer End -->
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiOrderDetail } from '@/api/order'
import Price from '@/components/price/index.vue'
import OrderFooter from '@/components/order-footer/index.vue'

/** Data Start **/

const orderData: any = ref<any>({})
const orderId = ref<number | string>('')
/** Data End **/

/** Methods Start **/
// 初始化订单详情
const initOrderDetail = async (): Promise<void> => {
    orderData.value = await apiOrderDetail({ id: orderId.value })
    orderData.value.courseSnap = JSON.parse(orderData.value.courseSnap)
    console.log(orderData.value.courseSnap)
}
// 查看课程
const goCourseDetail = (id: number) => {
    uni.navigateTo({
        url: `/pages/course_detail/index?id=${id}`
    })
}
/** Methods End **/

/** Life Cycle Start **/
onLoad((options: any) => {
    // 获取订单ID
    orderId.value = parseInt(options?.id)

    // 初始化订单信息
    initOrderDetail()
})
/** Life Cycle End **/
</script>

<style lang="scss">
.order_detail {
    height: 100%;
    padding: 30rpx 24rpx;
    padding-bottom: 140rpx;
    background: linear-gradient(to bottom, $color-primary 200rpx, transparent 0);

    .header-image {
        width: 44rpx;
        height: 44rpx;
    }

    .card {
        padding: 24rpx;
        margin-bottom: 20rpx;
        background-color: $color-white;
        border-radius: $border-radius-large;

        &--header {
            padding-bottom: 20rpx;
        }
        .title {
            font-weight: 500;
            color: $color-text-deep;
            font-size: $font-size-xl;
        }
    }

    .course-item {
        display: flex;
        &--text {
            width: 400rpx;
        }
    }
}
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 22rpx rgba($color: #000000, $alpha: 0.2);

    &--wrap {
        padding-bottom: env(safe-area-inset-bottom);
    }
}
</style>
